<template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="login">
        <div class="loginform">
          <el-tabs type="border-card"  class="Login">
            <el-tab-pane label="密码登录" >
              <div class="content">
              <form action="##">
                <div class="input-text clearFix">
                  <span></span>
                  <input type="text" placeholder="用户名" v-model="form.username">
                </div>
                <div class="input-text clearFix">
                  <span class="pwd"></span>
                  <input type="password" placeholder="请输入密码" v-model="form.password">
                </div>
                <div class="input-text clearFix">
                  <span class="code"></span>
                  <input type="text" placeholder="请输入验证码" v-model="form.code">
                </div>

                <div class="form-field form-field--icon pw-input-wrapper" @click="getCode">
                  <img height="50px" width="130px" :src="base64img">
                </div>
                <div class="setting clearFix">
                  <label class="checkbox inline">
                    <input name="m1" type="checkbox" value="2" checked="">
                    自动登录
                  </label>
                  <span class="forget">忘记密码？</span>
                </div>
                <el-button class="btn" @click="goLoginMeth">登&nbsp;&nbsp;录</el-button>
              </form>

              <div class="call clearFix">
                <ul>
                  <li><img src="./images/qq.png" alt=""></li>
                  <li><img src="./images/sina.png" alt=""></li>
                  <li><img src="./images/ali.png" alt=""></li>
                  <li><img src="./images/weixin.png" alt=""></li>
                </ul>
                <router-link class="register" to="/register">立即注册</router-link>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="手机登录" class="phoneLogin">
              <div class="content">
                <form action="##">
                  <div class="input-text clearFix">
                    <span></span>
                    <input type="text" placeholder="手机号" v-model="form.phone">
                  </div>
                  <div class="input-text clearFix">
                    <span class="pwd"></span>
                    <input type="text" placeholder="验证码" v-model="form.phoneCode">
                  </div>
                  <div>
                    <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
                    <span class="status">{{ statusMsg }}</span>
                  </div>
                  <br>
                  <div class="setting clearFix">
                    <label class="checkbox inline">
                      <input name="m1" type="checkbox" value="2" checked="">
                      自动登录
                    </label>
                    <span class="forget">忘记密码？</span>
                  </div>
                  <button class="btn" @click="loginByPhone">登&nbsp;&nbsp;录</button>
                </form>

                <div class="call clearFix">
                  <ul>
                    <li><img src="./images/qq.png" alt=""></li>
                    <li><img src="./images/sina.png" alt=""></li>
                    <li><img src="./images/ali.png" alt=""></li>
                    <li><img src="./images/weixin.png" alt=""></li>
                  </ul>
                  <router-link class="register" to="/register">立即注册</router-link>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="二维码登录" class="phoneLogin">
              <div class="content">


                <div class="call clearFix">
                  <ul>
                    <li><img src="./images/qq.png" alt=""></li>
                    <li><img src="./images/sina.png" alt=""></li>
                    <li><img src="./images/ali.png" alt=""></li>
                    <li><img src="./images/weixin.png" alt=""></li>
                  </ul>
                  <router-link class="register" to="/register">立即注册</router-link>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
      <div class="beian">京ICP备19006430号
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {setToken,setNickName} from "@/utils/setToken";
  import {set} from "@/api/common";

  export default {
    name: 'Login',
    data(){
      return{
        text: '请扫描二维码',
        uName: '',
        isScan: false,
        statusMsg:'',
        form: {
          phone:'',
          username: '',
          password: '',
          uuid: '',
          code: '',
          phoneCode:''
        },
        base64img: ""
      }
    },
    created() {
      this.getCode();
    },

    methods:{

      loginByPhone(){
        let checkphone = /^1[3456789]\d{9}$/;
        if (this.form.phone==''){
          alert("手机号不能为空")
          return;
        }
        if (!checkphone.test(this.form.phone)){
          alert("请正确输入手机号")
          return;
        }
        if (this.form.phoneCode == ''){
          alert("验证码不能为空")
          return;
        }
        axios({
          url:'/auth/loginByMobile',
          method:'post',
          params:{
            mobile:this.form.phone,
            code:this.form.phoneCode
          }
        }).then(response =>{
          console.log(response)
          if (response.code == 200 ){
            console.log(response)
            setToken(response.data.jwt)
            console.log(response.data.nickName)
            setNickName(response.data.nickName)
            alert(response.msg)
            this.$router.push('/home')
            this.$router.go(0)
          }
        })

      },
      sendMsg: function() {
        const self = this

        if (self.timerid) {
          return false
        }
        self.statusMsg = ''
        let checkphone = /^1[3456789]\d{9}$/;
        if (this.form.phone==''){
          alert("手机号不能为空")
          return;
        }
        if (!checkphone.test(this.form.phone)){
          alert("请正确输入手机号")
          return;
        }
        // 模拟验证码发送
          let count = 60
          self.statusMsg = `验证码已发送,剩余${--count}秒`
          self.timerid = setInterval(function() {
            self.statusMsg = `验证码已发送,剩余${--count}秒`
            if (count <= 0) {
              clearInterval(self.timerid)
              self.statusMsg = ''
              self.timerid = null;
            }
          }, 1000)
        axios({
          url:'/member/register/sendMessageCode',
          method:'post',
          params:{
            mobile:this.form.phone
          }
        }).then(response =>{
        })
      },

      getCode() {
        console.log("---------")
        // 模拟返回验证码图片
        axios({
          url: '/kaptcha/captchaImage',
          method: 'get'
        }).then(response => {
          console.log("135467",response)
          this.form.uuid = response.uuid
          this.base64img = 'data:image/png;base64,' + response.img
        });

      },
      async goLoginMeth(){
        if (this.form.username === '' ) {
          alert('用户名不能为空')
          return;
        }
        if (this.form.password == '') {
          alert('密码不能为空')
          return;
        }
        if (this.form.code == '') {
          alert('验证码不能为空')
          return;
        }
        axios({
          url:'/auth/loginByPassword',
          method:'post',
          params:{
            username: this.form.username,
            password:this.form.password,
            code:this.form.code,
            uuid:this.form.uuid
          }
        }).then(response =>{
          if (response.code == 200 ){
            console.log(response)
            console.log(response.data)
            console.log(response.data.nickName)
            setToken(response.data.jwt)
            setNickName(response.data.nickName)
            alert(response.msg)
            this.$router.push('/home')
            this.$router.go(0)
          }
        })
        // localStorage.setItem
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    .login-wrap {
      height: 487px;
      background-color: #e93854;

      .login {
        width: 1200px;
        height: 487px;
        margin: 0 auto;
        background: url(./images/loginbg.png) no-repeat;
      }

      .loginform {
        width: 420px;
        height: 406px;
        box-sizing: border-box;
        background: #fff;
        float: right;
        top: 45px;
        position: relative;
        padding: 20px;

        .tab {

          li {
            width: 50%;
            float: left;
            text-align: center;

            a {
              width: 100%;
              display: block;
              height: 50px;
              line-height: 50px;
              font-size: 20px;
              font-weight: 700;
              color: #333;
              border: 1px solid #ddd;
              box-sizing: border-box;
              text-decoration: none;

            }

            .current {
              border-bottom: none;
              border-top-color: #28a3ef;
              color: #e1251b;
            }
          }
        }
        .Login{
          width: 420px;
         position: relative;
          left: -20px;
          top: -40px;
        }
        .phoneLogin{
          height: 378px;
        }
        .content {
          width: 380px;
          height: 316px;
          box-sizing: border-box;
          border: 1px solid #ddd;
          border-top: none;
          padding: 18px;

          form {
            margin: 15px 0 18px 0;
            font-size: 12px;
            line-height: 18px;

            .input-text {
              margin-bottom: 16px;

              span {
                float: left;
                width: 37px;
                height: 32px;
                border: 1px solid #ccc;
                background: url(./images/icons.png) no-repeat -10px -201px;
                box-sizing: border-box;
                border-radius: 2px 0 0 2px;
              }

              .pwd {
                background-position: -72px -201px;
              }

              input {
                width: 302px;
                height: 32px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-left: none;
                float: left;
                padding-top: 6px;
                padding-bottom: 6px;
                font-size: 14px;
                line-height: 22px;
                padding-right: 8px;
                padding-left: 8px;

                border-radius: 0 2px 2px 0;
                outline: none;
              }
            }

            .setting {
              label {
                float: left;
              }

              .forget {
                float: right;
              }
            }

            .btn {
              background-color: #e1251b;
              padding: 6px;
              border-radius: 0;
              font-size: 16px;
              font-family: 微软雅黑;
              word-spacing: 4px;
              border: 1px solid #e1251b;
              color: #fff;
              width: 100%;
              height: 36px;
              margin-top: 25px;
              outline: none;
            }
          }

          .call {
            margin-top: 30px;

            ul {
              float: left;

              li {
                float: left;
                margin-right: 5px;
              }
            }

            .register {
              float: right;
              font-size: 15px;
              line-height: 38px;
            }

            .register:hover {
              color: #4cb9fc;
              text-decoration: underline;
            }
          }

        }
      }
    }

    .copyright {
      width: 1200px;
      margin: 0 auto;
      text-align: center;
      line-height: 24px;

      ul {
        li {
          display: inline-block;
          border-right: 1px solid #e4e4e4;
          padding: 0 20px;
          margin: 15px 0;
        }
      }
    }

  }
</style>